<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用CDN方式引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
</head>
<body>
<!-- id标识vue作用的范围 -->
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
 此时title中显示的是模型数据
-->
<div id="app">
    <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
    <button v-on:click="search()">查询</button>

    <!-- v-on 指令绑定事件，v-on 指令的简写形式是 @
    <button @click="search()">查询</button>
    -->

    <p>您要查询的是：{{searchMap.keyWord}}</p>
    <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
</div>

<script>
    // 创建一个vue对象
    let vm = new Vue({
        el: '#app',//绑定vue作用的范围,el是element的简写。
        data: {//定义页面中显示的模型数据或者说为属性
            searchMap:{
                keyWord: '牛牛编程'
            },
            //查询结果
            result: {}
        },
        methods:{
            search(){
                console.log('search');
                this.result = {
                    "title":"牛牛编程",
                    "site":"https://www.simoniu.com"
                }
            }
        }
    })
</script>
</body>
</html>
